<template>
	<view>
		<pageHeader   @back='back' :fixed='true' >
			<text>消息</text>
			<view class="title_right" slot="right">
				<text>设为已读</text>
				<text>清空</text>
			</view>
		</pageHeader>
		<view class="pageshade"  v-if="deleing" @tap='deleing = false' @touchmove.stop.prevent >
			<view class="dele" @tap="bindClick($event,chooseIndex,1)" :style='{top:top}'>
				<image src="/static/svg/deleImg.svg" mode=""></image>
				<text>删除</text>
			</view>
		</view>
		<view class="titleBar">
			<view :class="{title_native:titleNative==0}" @tap='toChooseTap($event,0)'>
				<text class="haveNum">聊天记录</text>
			</view>
			<view :class="{title_native:titleNative==1}"  @tap='toChooseTap($event,1)'>
				<text class="haveNum">互动记录</text>
			</view>
			<view :class="{title_native:titleNative==2}" @tap='toChooseTap($event,2)'>
				<text class="haveNum">系统消息</text>
			</view>
			<view :class="{title_native:titleNative==3}" @tap='toChooseTap($event,3)'>
				<text class="haveNum">物流消息</text>
			</view>
		</view>
		<view style="height: 90rpx;"></view>	
		<!-- 聊天记录 -->
		<template v-if="titleNative==0">
			<view class="chatRrecord">
				<image src="/static/img/toux2x.png" mode=""></image>
				<view class="chatRrecordMessage">
					<view >
						<text>客服 小金</text>
						<text>2019-12-20 09:20</text>
					</view>
					<view >
						<text>谢谢您的咨询，欢迎下次光临！</text>
						<text>16</text>
					</view>
				</view>
			</view>
		</template>
		
		<!-- 互动记录 -->
		<template v-if="titleNative==1">
			<view class="interaction" @tap='toHaveALook($event,"comment")'>
				<image src="/static/svg/pinglunb.svg" mode=""></image>
				<text>评论</text>
				<text>16</text>
				<image src="/static/svg/messageBoxLeft.svg" mode=""></image>
			</view>
			<view class="interaction" @tap='toHaveALook($event,"follow")'>
				<image src="/static/svg/guanzhub.svg" mode=""></image>
				<text>关注我的</text>
				<text>16</text>
				<image src="/static/svg/messageBoxLeft.svg" mode=""></image>
			</view>
			<view class="interaction" @tap='toHaveALook($event,"praise")'>
				<image src="/static/svg/dianzanb.svg" mode=""></image>
				<text>点赞</text>
				<text>16</text>
				<image src="/static/svg/messageBoxLeft.svg" mode=""></image>
			</view>
		</template>
		
		<!-- 系统消息 -->
		<view class="system" :style="{minHeight:height+'px'}" v-if="titleNative==2">
			<view class="systemTitle">
				<text>最新消息</text>
			</view>
			<uni-swipe-action>
				<uni-swipe-action-item :options="options1" @click="bindClick($event,index)" v-for="(item,index) in list" :auto-close="false" :key='index' @change="change($event,index)" :show="item.isOpened">
					<template v-if="index%2==0">
						<view class="systemBody" @longpress="longpress($event,index)">
							<view class="systemBody_title">
								<view class="notLook"></view>
								<text>物连家美平台</text>
								<text>2020-01-16 09:52</text>
							</view>
							<view class="systemBody_body">
								<image src="/static/img/20200210110217.jpg" mode=""></image>
								<text><text>王哈哈</text>邀请您加入“陈氏家谱”，赶紧加入哦！</text>
							</view>
							<text class="systemLink" @tap='toEdit($event,index)'>点击加入</text>
						</view>
					</template>
					<template v-else>
						<view class="systemBody" @longpress="longpress($event,index)">
							<view class="systemBody_title">
								<view class="notLook"></view>
								<text>物连家美平台</text>
								<text>2020-01-16 09:52</text>
							</view>
							<view class="systemBody_body">
								<text class="noImg">程笑笑，今天是您的生日，经典传承祝您生日快乐！生活美满！</text>
							</view>
						</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>		
			<view style="height: 30rpx;"></view>
		</view>
		
		<!-- 物流消息-->
		<view class="system" :style="{minHeight:height+'px'}" v-if="titleNative==3">
			<view class="systemTitle">
				<text>最新消息</text>
			</view>
			<view class="logistics_body">
				<view class="logistics_body_title">
					<text>订单编号：2020012612563018</text>
					<text>等待收货</text>
				</view>
				<view class="logistics_body_body">
					<image src="/static/img/20200210110217.jpg" mode=""></image>
					<view class="logistics_body_body_content">
						<text>10TB 特惠空间（1年）商品标题最多的字数排的</text>
						<text>家谱；1年时效</text>
						<view>
							<text><text>¥</text>269.00</text>
							<text>x1</text>
						</view>
					</view>
				</view>
			</view>
			<view class="systemTitle">
				<text>更早的消息</text>
			</view>
			<view class="logistics_body">
				<view class="logistics_body_title">
					<text>订单编号：2020012612563018</text>
					<text style="color: #999999;">订单已签收</text>
				</view>
				<view class="logistics_body_body">
					<image src="/static/img/20200210110217.jpg" mode=""></image>
					<view class="logistics_body_body_content">
						<text>10TB 特惠空间（1年）商品标题最多的字数排的</text>
						<text>家谱；1年时效</text>
						<view>
							<text><text>¥</text>269.00</text>
							<text>x1</text>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
		</view>
	</view>
</template>

<script>
	import pageHeader from "@/components/header/header.vue"
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {pageHeader,uniSwipeAction,uniSwipeActionItem},
		data() {
			return {
				height:0,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#C84739',
						color:'#FFFFFF',
					}
				}],
				isOpened:false,
				list:[{
					isOpened:false
				},
				{
					isOpened:false
				},
				{
					isOpened:false
				},
				{
					isOpened:false
				},
				{
					isOpened:false
				},
				{
					isOpened:false
				},
				{
					isOpened:false
				},
				{
					isOpened:false
				}],
				isChange:false,
				top:0,
				chooseIndex:0,
				deleing:false,
				titleNative:0,
				scrollTop:0
			};
		},
		onLoad() {
			this.height=uni.getSystemInfoSync().windowHeight-((88+90)/750)*uni.getSystemInfoSync().windowWidth
		},
		onPageScroll(e){
			this.scrollTop=e.scrollTop
		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toChooseTap(e,index){
				this.scrollTop=0
				if(index!=this.titleNative){
					this.titleNative=index
				}
			},
			toHaveALook(e,type){
				uni.navigateTo({
					url: '/pages/messageBox/interactiveRecord?type='+type
				})
			},	
			async bindClick(e,index,n) {
				let data={},res
				if(n){
					uni.showModal({
						content: '确定要删除吗？',
						cancelText:'取消',
						confirmText:'确定',
						success:async (res)=> {
							if (res.confirm) {
								console.log('点击删除')
							}
						}
					})
				}else{
					console.log('点击红色删除键删除')
				}
			},
			change(e,index){
				this.isChange=true
				if(this.list.length>0){
					this.list[index].isOpened=e
				}
				if(e==true){
					this.$nextTick(()=>{
						for(let key in this.list){
							if(key!=index){
								this.list[key].isOpened=false
							}
						}
						this.$forceUpdate()
					})
				}else{
					setTimeout(()=>{
						this.isChange=false
					},2)
				}
			},
			toEdit(e,index){
				if(this.isChange){
					this.isChange=false
					return
				}else{
					console.log(index)
				}
			},
			longpress(e,index){
				if(this.isChange){
					this.isChange=false
					return
				}else{
					let theOne
					let defaultHeight=Number((162/750)*uni.getSystemInfoSync().windowWidth)
					const query = uni.createSelectorQuery().in(this);
					query.selectAll('.systemBody').boundingClientRect(list => {
						for(let a=0;a<list.length;a++){
							if(e.touches[0].clientY<list[a].top){
								theOne=list[a-1]
								break
							}else{
								theOne=list[a]
							}
						}
						let h=(theOne.top+theOne.height-defaultHeight)+Number((107/750)*uni.getSystemInfoSync().windowWidth)-uni.getSystemInfoSync().windowHeight
						if(h>=-15){
							uni.pageScrollTo({
							    scrollTop: h+15+this.scrollTop,
							    duration: 100
							})
							setTimeout(()=>{
								this.chooseIndex=index
								this.deleing=true
								this.top=(theOne.top+theOne.height-defaultHeight-h-15)+'px'
							},100)
						}else{
							this.chooseIndex=index
							this.deleing=true
							this.top=(theOne.top+theOne.height-defaultHeight)+'px'
						}
					}).exec()
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}
.title_right{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	word-break: keep-all;
	text{
		font-size: 32rpx;
		line-height: 32rpx;
		color:#333333 ;
		line-height: 1rpx;
		margin-right: 30rpx;
	}
}
.titleBar{
	display: flex;
	align-items: center;
	padding-left: 40rpx;
	width: 750rpx;
	border-bottom: 1rpx solid #EEEEEE;
	position: fixed;
	top: 88rpx;
	left: 0;
	height: 90rpx;
	z-index: 10;
	background-color: #FFFFFF;
	view{
		margin-left: 60rpx;
		height: 100%;
		display: flex;
		align-items: center;
		text{
			font-size: 28rpx;
			color:#AEA8A2 ;
			line-height: 28rpx;
			letter-spacing: 1rpx;
			position: relative;
		}
		.haveNum::after{
			content:"";
			display: block;
			height: 14rpx;
			width: 14rpx;
			background-color: #C84739;
			position: absolute;
			top: -7rpx;
			right: -16rpx;
			border-radius: 50%;
		}
	}
	view:first-of-type{
		margin-left: 0;
	}
	.title_native{
		position: relative;
		text{
			font-weight: bold;
			font-size: 34rpx;
			color:#333333 ;
			line-height: 34rpx;
		}
	}
	.title_native::after{
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left:0 ;
		height:6rpx ;
		width: 34rpx;
		background-color: #333333;
		border-radius: 5rpx;
	}
}
.chatRrecord{
	height:166rpx ;
	display: flex;
	align-items: center;
	padding-left: 30rpx;
	border-bottom: 1rpx solid #ddd;
	image{
		height:106rpx ;
		width: 106rpx;
		border-radius: 50%;
	}
	.chatRrecordMessage{
		height: 106rpx;
		margin-left: 20rpx;
		width: 564rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: space-between;
		view{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}
		view:first-of-type{
			position: relative;
			top:7rpx ;
			text:first-of-type{
				color: #333333;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 32rpx;
				letter-spacing: 1rpx;
			}
			text:nth-of-type(2){
				color: #999999;
				font-size: 26rpx;
				line-height: 26rpx;
				letter-spacing: 1rpx;
			}
		}
		view:nth-of-type(2){
			position: relative;
			bottom:7rpx ;
			text:first-of-type{
				color: #999999;
				font-size: 30rpx;
				line-height: 30rpx;
				letter-spacing: 1rpx;
			}
			text:nth-of-type(2){
				display: block;
				height:32rpx ;
				background-color:#C84739 ;
				border-radius: 19rpx;
				padding: 0 8rpx;
				color: #FFFFFF;
				font-size: 26rpx;
				line-height: 32rpx;
				letter-spacing: 1rpx;
			}
		}
	}
}
.interaction{
	height:156rpx ;
	border-bottom: 1rpx solid #dddd;
	display: flex;
	align-items: center;
	position: relative;
	image:first-of-type{
		height: 96rpx;
		width: 96rpx;
		border-radius: 50%;
		margin-left: 30rpx;
	}
	text:first-of-type{
		font-size: 34rpx;
		font-weight: bold;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		margin-left: 20rpx;
	}
	text:nth-of-type(2){
		display: block;
		height:32rpx ;
		background-color:#C84739 ;
		border-radius: 19rpx;
		padding: 0 8rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		line-height: 32rpx;
		letter-spacing: 1rpx;
		position: absolute;
		right: 74rpx;
	}
	image:nth-of-type(2){
		height: 24rpx;
		width:14rpx ;
		position: absolute;
		right: 30rpx;
	}
}
.system{
	background-color: #F5F5F5;
	.systemTitle{
		height: 90rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		text{
			font-size: 30rpx;
			line-height: 30rpx;
			color:#333333 ;
			letter-spacing: 1rpx;
		}
	}
	.systemBody{
		min-width: 750rpx;
		background-color:#FFFFFF;
		border-bottom: 1rpx solid #ddd;
		padding: 30rpx;
		position: relative;
		.systemBody_title{
			display: flex;
			align-items: center;
			position: relative;
			.notLook{
				height: 14rpx;
				width: 14rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				background-color: #C84739;
			}
			text:first-of-type{
				font-size: 34rpx;
				font-weight: bold;
				line-height: 34rpx;
				letter-spacing: 1rpx;
			}
			text:nth-of-type(2){
				color: #999999;
				font-size: 26rpx;
				line-height: 26rpx;
				letter-spacing: 1rpx;
				position: absolute;
				right: 0rpx;
			}
		}
		.systemBody_body{
			margin-top: 20rpx;
			display: flex;
			image{
				height: 86rpx;
				width: 86rpx;
				border-radius: 50%;
			}
			text{
				margin-left: 20rpx;
				font-size: 30rpx;
				line-height: 46rpx;
				letter-spacing: 1rpx;
				color: #333333;
				width: 582rpx;
				text-align: justify;
				text{
					color: #549AEC;
					width: unset;
					margin-left:unset
				}
			}
			.noImg{
				width:696rpx ;
				margin-left: 0;
			}
		}
		.systemLink{
			font-size:30rpx ;
			line-height: 30rpx;
			letter-spacing: 1rpx;
			position: absolute;
			bottom:38rpx ;
			right: 30rpx;
			color:#C84739 ;
		}
		.systemLink::after{
			content: "";
			height: 1px;
			width: 100%;
			left: 0;
			background-color: #C84739;
			position: absolute;
			bottom: calc(-3rpx - 1px) ;
		}
	}
}
page /deep/ .uni-swipe_button-text{
	letter-spacing: 1rpx;
	font-size: 30rpx;
}
page /deep/ .uni-swipe_button{
	padding: 0;
	width:150rpx;
	position: relative;
	display: flex;
	align-items: center;
}
.pageshade{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
	z-index: 1049;
	.dele{
		position: absolute;
		height:107rpx ;
		width: 349rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1200;
		right:53rpx ;
		image{
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		text{
			font-size: 36rpx;
			line-height: 36rpx;
			letter-spacing: 1rpx;
			color:#C84739 ;
			position: relative;
			top: 6rpx;
		}
	}
}
.logistics_body{
	background-color: #FFFFFF;
	padding:30rpx ;
	border-bottom: 1rpx solid #DDDDDD;
	.logistics_body_title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding-right: 10rpx;
		text:first-of-type{
			font-size:26rpx ;
			color: #666666;
			line-height: 30rpx;
		}
		text:nth-of-type(2){
			font-size:28rpx ;
			line-height: 28rpx;
			color: #E4601C;
		}
	}
	.logistics_body_body{
		background-color:#F9F9F9 ;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		image{
			height: 178rpx;
			width: 178rpx;
		}
		.logistics_body_body_content{
			display: flex;
			flex-flow: column;
			width: 452rpx;
			height: 178rpx;
			margin-left: 20rpx;
			position: relative;
			text{
				text-align: justify;
			}
			text:first-of-type{
				font-size: 28rpx;
				line-height: 42rpx;
				letter-spacing: 1rpx;
				color: #333333;
				font-weight: bold;
			}
			text:nth-of-type(2){
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 24rpx;
				letter-spacing: 1rpx;
			}
			view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				text:first-of-type{
					font-weight:bold ;
					font-size: 30rpx;
					line-height: 30rpx;
					color:#F0421E ;
					letter-spacing: 1rpx;
					text{
						font-size: 24rpx;
						font-weight: normal;
					}
				}
				text:nth-of-type(2){
					font-size: 26rpx;
					line-height: 28rpx;
					color:#666666 ;
					letter-spacing: 1rpx;
					margin-top: 0;
				}
			}
		}
	}
}
</style>
